<template>
	<view>
		<view v-if="beflows.operstate == 'add'">
			<slot />
		</view>
		<view v-else>
			<wuc-tab id="tab" :tab-list="tabList3" textFlex :tabCur.sync="TabCur3"
				tab-class="text-center text-black bg-white wuc-tab fixed" select-class="text-blue"></wuc-tab>
			<view>
				<swiper :current="TabCur3" class="swiper row" duration="300" :style="{height:(height-51)+'px'}"
					:circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)"
					@change="tabChange">
					<swiper-item v-for="(item,index) in tabList3" :key="index">
						<scroll-view scroll-y :style="{height:(height-51-oprbtn)+'px'}">
							<view v-if="index==0">
								<view class="approval_status" v-if="status != 0">
									<image :src="approvalStatus" mode="widthFix"
										v-show="statusType == 'started' ? true : false"></image>
								</view>
								<slot />
							</view>
							<view v-if="index==1" class="example-body">
								<uni-steps :options="nodeList" active-color="#339AFF" :active="active"
									direction="column" />
							</view>
							<view v-if="index==2 && beflows.operstate != 'add'">
								<view class="uni-timeline">
									<view v-for="(item,index) in records" :key="index">
										<view class="uni-timeline-item" :class="index==0?'uni-timeline-first-item':''"
											v-if="item.F_HandleStatus == 2">
											<view class="uni-timeline-item-divider"></view>
											<view class="uni-timeline-item-content">
												<view class="color-3A3A3A">发起人员：{{item.F_HandleId}}</view>
												<view class="datetime">发起时间：{{item.F_HandleTime}}</view>
											</view>
										</view>
										<view class="uni-timeline-item" v-else-if="item.F_HandleStatus == 3">
											<view class="uni-timeline-item-divider"></view>
											<view class="uni-timeline-item-content">
												<view class="color-3A3A3A">撤回人员：{{item.F_HandleId}}</view>
												<view class="datetime">撤回时间：{{item.F_HandleTime}}</view>
												<view class="color-9A9A9A">撤回节点：{{item.F_NodeName}}</view>
												<view class="color-9A9A9A timeline-handleOpinion">
													撤回原因：{{(item.F_HandleOpinion!=null?item.F_HandleOpinion:"")}}</view>
											</view>
										</view>
										<view class="uni-timeline-item" v-else-if="item.F_HandleStatus == 4">
											<view class="uni-timeline-item-divider"></view>
											<view class="uni-timeline-item-content">
												<view class="color-3A3A3A">终止人员：{{item.F_HandleId}}</view>
												<view class="datetime">终止时间：{{item.F_HandleTime}}</view>
												<view class="color-9A9A9A timeline-handleOpinion">
													终止原因：{{(item.F_HandleOpinion!=null?item.F_HandleOpinion:"")}}</view>
											</view>
										</view>
										<view class="uni-timeline-item" v-else>
											<view class="uni-timeline-item-divider"></view>
											<view class="uni-timeline-item-content">
												<view class="color-3A3A3A">审核人员：{{item.F_HandleId}}</view>
												<view class="datetime">审核时间：{{item.F_HandleTime}}</view>
												<view class="color-9A9A9A">审核节点：{{item.F_NodeName}}</view>
												<view class="color-9A9A9A">审核状态：<text
														:class="item.HandleStatus.statecss">{{item.HandleStatus.text}}</text>
												</view>
												<view class="color-9A9A9A timeline-handleOpinion">
													审核意见：{{(item.F_HandleOpinion!=null?item.F_HandleOpinion:"")}}</view>
											</view>
										</view>
									</view>
									<view class="uni-timeline-item uni-timeline-last-item"
										v-if="flowTaskInfo.F_Completion==100">
										<view class="uni-timeline-item-divider"></view>
										<view class="uni-timeline-item-content">
											<view class="color-3A3A3A">节点名称：{{flowTaskInfo.F_ThisStep}}</view>
											<view class="datetime">结束时间：{{flowTaskInfo.F_EndTime}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view v-show="isStatus" class="buttom-box">
			<view v-if="status == 0 || status == 'add' || status == 3|| status == 4" class="flow-button">
				<button class="btn-same btn-keep" @tap="save" :disabled="isBtnClicks">保存</button>
				<button class="btn-same btn-submit" @tap="submit" :disabled="isBtnClicks"
					hover-class="com-hover-btn">提交</button>
			</view>

			<view v-if="status == 1 && statusType!='backlog'" class="flow-button">
				<button class="btn-danger btn-same reAlready" @tap="withdraw" :disabled="isBtnClicks">撤回</button>
			</view>

			<view v-else-if="statusType=='backlog'" class="flow-button">
				<button class="btn-keep btn-same" @tap="refuse" :disabled="isBtnClicks">拒绝</button>
				<button class="btn-submit btn-same" @tap="agree" :disabled="isBtnClicks">通过</button>
			</view>
		</view>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import status from '@/common/js/processStatus.js'

	function flowStatus(value) {
		var state
		switch (value) {
			case 1:
				state = {
					text: '同意',
					statecss: 'text-success'
				}
				break;
			default:
				state = {
					text: '拒绝',
					statecss: 'text-danger'
				}
				break;
		}
		return state
	}
	export default {
		props: {
			beforeData: {
				type: Object,
				default () {
					return {};
				}
			},
			statusType: {
				type: String,
				default () {
					return null;
				}
			},
			beflows: { //被选中的 tab 位置
				type: Object,
			},
			TabCur: { //被选中的 tab 位置
				type: Number,
				default () {
					return 0;
				}
			},
			status: { //保存 提交 同意 拒绝 撤回
				type: Number,
				default () {
					return;
				},
			},
			isBtnClick: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		data() {
			return {
				tabList3: [{
					name: '表单信息'
				}, {
					name: '流程信息'
				}, {
					name: '流转记录'
				}],
				TabCur3: 0,
				active: -1,
				flowname: '',
				height: 0,
				record: [],
				flowTaskInfo: {
					F_Completion: 0,
					F_EndTime: '',
					F_ThisStep: ''
				},
				nodeList: [],
				isBtnClicks: false,
				freeApprover: 0,
				oprbtn: 0,
				approvalStatus: '',
				initData: this.beforeData
			};
		},

		components: {
			WucTab,
			uniSteps
		},
		computed: {
			records: function() {
				return this.record
			},
			flowfromId: function() {
				return this.$store.state.workflow.flowfromId
			},
			isStatus: function() {
				if (this.statusType == 'alreadybacklog' || this.statusType == 'copyme') {
					return false
				} else {
					return true
				}
			},
		},

		methods: {
			init() {
				
				let _this = this;
				helper.ajax({
					url: '/api/WorkFlow/FlowBefore/' + this.beflows.processId,
					success: res => {
						
						// this.value = JSON.parse(res.data.data.flowFormInfo
						this.initData = JSON.parse(res.data.data.flowFormInfo)
						this.$emit('initClick', this.initData)
						this.freeApprover = res.data.data.freeApprover;
						if (this.freeApprover == undefined) {
							return
						}
						const _taskInfo = res.data.data.flowTaskInfo
						let flowTaskNodeList = res.data.data.flowTaskNodeList;
						if (_taskInfo.completion == 100) {
							flowTaskNodeList[flowTaskNodeList.length - 1].completion = 1
						}
						for (var i = 0; i < flowTaskNodeList.length; i++) {
							if (flowTaskNodeList[i].type != '-1') {
								this.nodeList.push({
									title: flowTaskNodeList[i].nodeName,
								})
							}

							if (flowTaskNodeList[i].completion == 1) {
								this.active++
							}
						}
						this.flowTaskInfo.F_Completion = _taskInfo.completion;
						this.flowTaskInfo.F_EndTime = helper.toDate(_taskInfo.endTime, "yyyy-MM-dd hh:mm");
						this.flowTaskInfo.F_ThisStep = _taskInfo.thisStep;
						switch (_taskInfo.status) {
							case 1: //等待审核
								this.approvalStatus = status.review
								break;
							case 2: //审核通过
								this.approvalStatus = status.reviewAdopt
								break;
							case 3: //审核驳回
								this.approvalStatus = status.reviewRefuse
								break;
							case 4: //审核撤回
								this.approvalStatus = status.reviewUndo
								break;
							case 5: //审核终止
								this.approvalStatus = status.reviewStop
								break;
							default:
								break;
						}
						const _data = res.data.data.flowTaskOperatorRecordList;
						for (var i = 0; i < _data.length; i++) {
							if (_data[i].F_HandleStatus == 2) {
								this.record.push({
									F_HandleTime: helper.toDate(_data[i].handleTime,
										"yyyy-MM-dd hh:mm"), //审核时间
									F_HandleId: _data[i].userName, //审核人员
									F_HandleStatus: _data[i].handleStatus
								});
							} else if (_data[i].F_HandleStatus == 3) {
								this.record.push({
									F_NodeName: _data[i].nodeName, //撤回节点
									F_HandleTime: helper.toDate(_data[i].handleTime,
										"yyyy-MM-dd hh:mm"), //撤回时间
									F_HandleId: _data[i].userName, //撤回人员
									F_HandleOpinion: _data[i].handleOpinion, //撤回原因
									F_HandleStatus: _data[i].handleStatus
								});
							} else if (_data[i].F_HandleStatus == 4) {
								this.record.push({
									F_HandleTime: helper.toDate(_data[i].handleTime,
										"yyyy-MM-dd hh:mm"), //终止时间
									F_HandleId: _data[i].userName, //终止人员
									F_HandleOpinion: _data[i].handleOpinion, //终止原因
									F_HandleStatus: _data[i].handleStatus
								});
							} else {
								this.record.push({
									F_NodeName: _data[i].nodeName, //审核节点
									F_HandleTime: helper.toDate(_data[i].handleTime,
										"yyyy-MM-dd hh:mm"), //审核时间
									F_HandleId: _data[i].userName, //审核人员
									F_HandleOpinion: _data[i].handleOpinion, //审核意见
									HandleStatus: flowStatus(_data[i].handleStatus), //审核状态
									F_HandleStatus: _data[i].handleStatus
								});
							}
						}
					}
				});
			},


			tabChange(e) {
				let {
					current
				} = e.target;
				this.TabCur3 = current;
				// this.TabCur3 = index;
			},
			save() { //保存
				this.$emit('save');
			},
			submit() { //提交
				this.$emit('submit');
			},
			withdraw() { //撤回
				
				if (this.status == 'reAlready') { //审核撤回
					this.bus.$off('auditopinion');
					this.bus.$on('auditopinion', (data) => {
						uni.showLoading({
							title: '正在请求...',
							mask: true
						});
						this.isBtnClicks = true;
						helper.ajax({
							url: '/api/WorkFlow/FlowBefore/Recall/' + this.flowfromId,
							method: 'POST',
							contentType: "application/json",
							data: {
								handleOpinion: data.F_HandleOpinion,
							},
							success: res => {
								helper.msg(res.data.meg, 'success');
								uni.redirectTo({
									url: '/pages/work/operate/backlog/backlog'
								});
								setTimeout(function() {
									uni.hideLoading();
									this.isBtnClicks = false
								}, 1000);
							},
						});
						this.bus.$off('auditopinion');
					});
					uni.navigateTo({
						url: '../../operate/auditopinion/auditopinion?opinion=撤回',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else { //发起撤回
					
					this.bus.$off('auditopinion');
					this.bus.$on('auditopinion', (data) => {
						
						this.isBtnClicks = true;
						uni.showLoading({
							title: '正在请求...',
							mask: true
						});
						helper.ajax({
							url: '/api/WorkFlow/FlowLaunch/' + this.flowfromId + '/Actions/Withdraw',
							method: 'PUT',
							contentType: "application/json",
							data: {
								handleOpinion: data.F_HandleOpinion
							},
							success: res => {
								helper.msg(res.data.meg, 'success');
								uni.redirectTo({
									url: '/pages/work/operate/started/started'
								});
								setTimeout(function() {
									uni.hideLoading();
									this.isBtnClicks = false
								}, 1000);
							},
						});
						this.bus.$off('auditopinion');
					});
					uni.navigateTo({
						url: '../../operate/auditopinion/auditopinion?opinion=撤回',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			agree() { //同意
				
				if (this.freeApprover == 0) {
					uni.navigateTo({
						url: '../../operate/auditopinion/auditopinion?opinion=同意',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: '../../operate/customexamine/customexamine?opinion=同意',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				this.bus.$off('auditopinion');
				this.bus.$on('auditopinion', (data) => {
					
					this.isBtnClicks = true;
					if (this.freeApprover == 0) {
						uni.showLoading({
							title: '正在请求...',
							mask: true
						});
						helper.ajax({
							url: '/api/WorkFlow/FlowBefore/Audit/' + this.flowfromId,
							method: 'POST',
							contentType: "application/json",
							data: {
								handleOpinion: data.F_HandleOpinion
							},
							success: res => {
								helper.msg(res.data.meg, 'success');
								uni.redirectTo({
									url: '/pages/work/operate/alreadybacklog/alreadybacklog'
								});
								setTimeout(function() {
									uni.hideLoading();
									this.isBtnClicks = false
								}, 1000);
							},
						});
					} else {
						uni.showLoading({
							title: '正在请求...',
							mask: true
						});
						helper.ajax({
							url: '/api/WorkFlow/FlowBefore/Audit/' + this.flowfromId,
							method: 'POST',
							contentType: "application/json",
							data: {
								handleOpinion: data.F_HandleOpinion,
								freeApproverUserId: data.F_UserId
							},
							success: res => {
								helper.msg(res.data.meg, 'success');
								uni.redirectTo({
									url: '/pages/work/operate/alreadybacklog/alreadybacklog'
								});
								setTimeout(function() {
									uni.hideLoading();
									this.isBtnClicks = false
								}, 1000);
							},
						});
					}
					this.bus.$off('auditopinion');
				});
			},
			refuse() { //拒绝
				this.bus.$off('auditopinion');
				this.bus.$on('auditopinion', (data) => {
					this.isBtnClicks = true;
					uni.showLoading({
						title: '正在请求...',
						mask: true
					});
					helper.ajax({
						url: '/api/WorkFlow/FlowBefore/Reject/' + this.flowfromId,
						method: 'POST',
						contentType: "application/json",
						data: {
							handleOpinion: data.F_HandleOpinion
						},
						success: res => {
							uni.redirectTo({
								url: '/pages/work/operate/alreadybacklog/alreadybacklog'
							});
							setTimeout(function() {
								uni.hideLoading();
								this.isBtnClicks = false
							}, 1000);
						},
					});
					this.bus.$off('auditopinion');
				});
				uni.navigateTo({
					url: '../../operate/auditopinion/auditopinion?opinion=拒绝',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		mounted() {

			// 获取设备宽度
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
			if (this.status !== 'copyme') {
				uni.createSelectorQuery().in(this).select(".buttom-box").boundingClientRect(data => {
					this.oprbtn = data.height;
				}).exec();
			}
			this.isBtnClicks = this.isBtnClick;
			this.isBtnClicks = this.status == 'alreadybacklog' ? true : false;

			if (this.beflows.operstate == 'info' && this.status != 0) {
				this.init()
			}
		},
	};
</script>
<style>
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
		background-color: #ffffff;
	}

	.cu-bar .action:first-child {
		margin-left: 30upx;
		font-size: 30upx;
	}

	.solid,
	.solid-bottom {
		position: relative;
	}

	.solid::after,
	.solid-bottom::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: inherit;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
	}

	.solid::after {
		border: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.solid-bottom::after {
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.text-orange {
		color: #f37b1d
	}

	.text-black {
		color: #333333;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.text-center {
		text-align: center;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}

	.btn-same {
		width: 50%;
		height: 100%;
		font-size: 34rpx;
		border-radius: 0;
		/* font-weight: 550; */
	}

	.btn-same::after {
		content: none;
	}

	.reAlready {
		width: 100% !important;
	}

	.approval_status {
		position: absolute;
		top: 0;
		right: 0;
		border: 0;
		margin: 30upx;
		opacity: 0.7;
		z-index: 9;
	}

	.approval_status image {
		width: 200upx;
		height: 200upx;
	}
</style>
